<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>伪类和伪元素</title>
</head>
<style>
    .tab_content{
        height: 800px;
        background: red;
        margin-bottom: 100px;
    }
    #tab1:target,#tab2:target,#tab3:target{
        background: blue;
    }
    table tr:nth-child(2n) {
        background-color: #ccc;
    }
    table tr:nth-child(2n+1) {
        background-color: #fff;
    }
    table tr:nth-child(2n+1):nth-child(5n) {
        background-color: #f0f;
    }
    p:lang(de):after{
        content: "(German)";
    }
    p:lang(en):after{
        content: "(english)";
    }
    p:lang(fr):after{
        content: "(french)";
    }
</style>
<body>
<ul class="tabs">
    <li><a href="#tab1">标签一</a></li>
    <li><a href="#tab2">标签二</a></li>
    <li><a href="#tab3">标签三</a></li>
    <div id="tab1" class="tab_content">tab_content1</div>
    <div id="tab2" class="tab_content">tab_content2</div>
    <div id="tab3" class="tab_content">tab_content3</div>
</ul>
<table>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
</table>
<p lang="en">I live in Duckburg.</p>
<p lang="de">I live in Duckburg.</p>
<p lang="fr">I live in Duckburg.</p>
</body>
</html>